<template>
  <el-dialog
    :title="param.id ? $t('message.edit') : $t('message.add')"
    :visible.sync="showDepositEdit"
    :close-on-click-modal="modalDialog"
    top="20vh !important"
    :close-on-press-escape="modalDialog"
    width="700px"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="param"
      label-width="auto"
      label-suffix="："
    >
      <el-form-item :label="$t('message.flmc')" prop="name">
        <el-input
          v-model="param.name"
          :placeholder="$t('message.qsr')"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('message.yj')" prop="price">
        <el-input
          v-model="param.price"
          :placeholder="$t('message.qsr') + $t('message.yj')"
          oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('message.sort')" prop="sortNum">
        <el-input
          v-model="param.sortNum"
          :placeholder="$t('message.qsr') + $t('message.sort')"
          clearable
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        />
      </el-form-item>
      <el-form-item :label="$t('message.status')" prop="status">
        <el-switch
          v-model="param.status"
          v-preventReClick
          :active-value="'1'"
          :inactive-value="'0'"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showDepositEdit = false">{{
        $t('message.qx')
      }}</el-button>
      <el-button
        v-preventReClick
        :loading="subLoading"
        type="primary"
        @click="onSubmit"
        >{{ $t('message.qr') }}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { editBraceletDeposit, addBraceletDeposit } from '@/api'
import store from '@/store'
export default {
  data () {
    return {
      modalDialog: store.getters.dialog,
      editPd: false,
      showDepositEdit: false,
      subLoading: false,
      param: {},
      rules: {
        price: [
          {
            required: true,
            message: this.$t('message.qsr') + this.$t('message.yj'),
            trigger: 'blue'
          }
        ],
        name: [
          { required: true, message: this.$t('message.qsr'), trigger: 'blue' },
          { min: 1, max: 30, message: this.$t('message.cdzyss'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    show (e) {
      this.showDepositEdit = true
      this.param = e || {}
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    onSubmit () {
      const that = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          const param = that.param
          this.subLoading = true
          if (param.id) {
            editBraceletDeposit({ param }).then(
              res => {
                this.subLoading = false
                if (res.errorCode !== '000000') return
                this.$message.success(this.$t('message.editcg'))
                this.showDepositEdit = false
              },
              () => {
                this.subLoading = false
              }
            )
          } else {
            addBraceletDeposit({ param }).then(
              res => {
                this.subLoading = false
                if (res.errorCode !== '000000') return
                this.$message.success(this.$t('message.tjcg2'))
                this.showDepositEdit = false
                this.$emit('refresh')
              },
              () => {
                this.subLoading = false
              }
            )
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
</style>
